<template>
    <div class="bg-blue-200 rounded-lg w-64 px-4 py-5 mx-96 my-64 shadow-lg">
        <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="temp" class="demo-form-inline">
            <el-form-item prop="userName" label="userName">
                <el-input v-model="temp.userName" placeholder="Approved by" />
            </el-form-item>
            <el-form-item prop="password" label="password">
                <el-input v-model="temp.password" placeholder="Approved by" />
            </el-form-item>
            <el-button class="bg-black text-cyan-50" @click="handleLogin(ruleFormRef)">
                登录
            </el-button>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { login } from "../../api";
import { setToken } from "../../utils/auth";
import { useRouter } from "vue-router";
const rules = reactive({
    userName: [
        { required: true, message: 'Please input Activity userName', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input Activity password', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})
const temp = reactive({
    userName: "123",
    password: "123"
})
const router = useRouter()
const ruleFormRef = ref();
const handleLogin = (formEl) => {
    formEl.validate(async valid => {
        if (valid) {
            let res = await login(temp)
            if (res.token != null) {
                setToken(res.token)
                router.push("/home")
            }else{
                alert(msg)
            }

        } else {
            console.log('error submit!')
        }
    })
}


</script>
